layui.use(function() {
    const layer = layui.layer,$ = layui.jquery,util = layui.util;
    //点击服务区
    $(document).on("click",'#serverClick',function (){
        $('#serverLayer').show();
        const serverArr = [{
            id:1,
            name: '燕赵服务区',
        },{
            id:2,
            name: '滦州服务区',
        },{
            id:3,
            name: '丰润服务区',
        },{
            id:4,
            name: '玉田服务区',
        },{
            id:5,
            name: '燕赵服务区',
        },{
            id:6,
            name: '滦州服务区',
        },{
            id:7,
            name: '丰润服务区',
        },{
            id:8,
            name: '玉田服务区',
        }];
        loadServerData(serverArr)
    });
    //关闭服务区弹出框
    $(document).on("click",'#closeServerLayer',function (){
        $('#serverLayer').hide();
    });
	//关闭服务区弹出框
	$(document).on("click",'#closeSingleServerLayer',function (){
	    $('#singleServerLayer').hide();
	});

    //点击搜索
    $(document).on("click",'#serverNameSearch',function (){
        const inputValue = $('input[name="serverName"]').val();
        layer.msg('您搜索是：' + inputValue);
        //TODO 这里调用接口 再调用loadServerData
    })

    let selectSever = {};

    $(document).on("click",'.elsic-layer-content-item',function (){
        const that = $(this);
        $('.elsic-layer-content-item').removeClass('item-select');
        that.addClass('item-select');
        selectSever.name = that.attr('data-name');
        selectSever.id = that.attr('data-id');
        console.log(selectSever)
    })

    $(document).on("click",'#serverSubmitBtn',function (){
        $('#serverLayer').hide();
        // layer.msg('您选中：' +  JSON.stringify(selectSever));
        // window.local.href = "index-服务区级.html"
		$('#singleServerLayer').show();
    })

    function loadServerData(serverArr){
        $('#serverNameList').html('');
        serverArr.forEach(a=>{
            $('#serverNameList').append(`<div class="elsic-layer-content-item" data-name="${a.name}" data-id="${a.id}"><span>${a.id}</span>${a.name}</div>`);
        })
    }

	function updateProgress(progress,dom,downOrUp){
		const offset = 251 * (1 - progress);
		$(dom).css('stroke-dashoffset', offset);
		$(dom).parent().parent().append('<div class="circle-text"><span class="'+downOrUp+'"></span>'+progress*100+'%</div>');
	}
	setTimeout(()=>{
		console.log(1111111111);
		updateProgress(0.2, '#circle1','up');
		updateProgress(0.5, '#circle2','down')
	},500)


});
